<template>
    <div class="subject" v-for="(item, index) in list" :key="index">
        <span>{{ item.a }}</span>
        <span>+</span>
        <span>{{ item.b }}</span>
        <span>=</span>
        <input type="number" v-model="item.sum"/>
        <!-- 按钮点击之后，计算当前这一行的a + b是不是等于sum -->
        <button @click="item.done = (item.a + item.b) === item.sum ? '回答正确' : '回答错误'">
            提交
        </button>
    </div>
</template>
<script setup>
const props = defineProps(['list'])
</script>
<style scoped>
.subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
}

.subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
}

.subject input {
    width: 50px;
    height: 20px;
}
</style>